<template>
  <div class="bgc-default pad-20">
    <div class="bg-color-white pad-20">
      <!--顶部搜索 -->
      <div class="top-operate-default">
        <div class="search-item">
          <label>搜索商品：</label>
          <el-select class="select-class" v-model="serachType">
            <el-option label="商品名称" value="1"></el-option>
            <el-option label="商品货号" value="2"></el-option>
            <el-option label="商品条码" value="3"></el-option>
          </el-select>
          <el-input @keyup.enter.native="handleSearch" v-model="searchKeyword" placeholder="请输入搜索内容" style="width: 200px;"></el-input>
          <label class="mar-l-20">商品分类：</label>
          <el-cascader v-model="categoryIds" :props="{ checkStrictly: true }" change-on-select placeholder="选择商品分类" :options="categoryData" class="default-input" clearable></el-cascader>
          <label class="mar-l-20">供应商：</label>
          <el-select v-model="searchListQuery.supplierId" placeholder="请选择供应商">
            <el-option v-for="(item, index) in supplierList" :key="index" :label="item.supplierName" :value="item.supplierId"></el-option>
          </el-select>
          <!--<el-select class="select-class" v-model="searchListQuery.goodsStatus" style="width: 150px" placeholder="选择上下架状态">-->
            <!--<el-option label="全部" value="2"></el-option>-->
            <!--<el-option label="下架" value="0"></el-option>-->
            <!--<el-option label="上架" value="1"></el-option>-->
          <!--</el-select>-->
          <label class="mar-l-20">审核类型：</label>
          <el-select class="select-class" v-model="searchListQuery.searchType" style="width: 150px" placeholder="审核内容类型">
            <el-option label="全部" value="2"></el-option>
            <el-option label="提交企业库" value="0"></el-option>
            <el-option label="更新商品" value="1"></el-option>
          </el-select>
          <el-button-group>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button el-button @click="resetSearch">重置</el-button>
          </el-button-group>
        </div>
      </div>
      <!--商品状态 -->
      <div class="tabs-box mar-t-15">
        <el-tabs type="card" v-model="auditType" @tab-click="goodsStatusClick">
          <el-tab-pane label="待审核" name="1"></el-tab-pane>
          <el-tab-pane label="审核未通过" name="3"></el-tab-pane>
        </el-tabs>
      </div>
      <!-- 内容列表 -->
      <div class="table-container mar-t-10">
        <el-table ref="multipleTable" :data="goodsList" @selection-change="handleSelectionChange" v-loading="listLoading"
          element-loading-text="加载中" style="width: 100%" header-cell-class-name="default-header" row-class-name="default-row">
          <el-table-column width="50px" type="selection"></el-table-column>
          <el-table-column width="280px" label="商品" fixed="left">
            <template slot-scope="scope">
              <div class="flex v-align-c cursor-p" @click="handleEdit(scope.row)">
                <label><img :src="scope.row.mainImage" class="user-avatar cursor-p"></label>
                <div class="font-14 pad-l-10 v-align-h height-65">
                  <div class="goods-title">
                    <div class="line-2">
                      <el-tag size="mini" v-if="scope.row.skuFlag == 1" type="danger" effect="light">多</el-tag>
                       <el-tag size="mini" v-if="scope.row.crossBorderType == 2" type="danger" effect="light">保</el-tag>
                      {{scope.row.title}}
                    </div>
                  </div>
                  <template v-if="scope.row.categoryName">
                    <span class="category-style">[{{scope.row.categoryName}}]</span>
                  </template>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="150px" label="商品货号" prop="goodsArticleNo"></el-table-column>
          <el-table-column width="150px" label="供应商" prop="supplierName"></el-table-column>
          <el-table-column width="150px" label="供应价">
            <template slot-scope="scope" v-if="scope.row.supplyPrice">
              ￥{{scope.row.supplyPrice}}
            </template>
          </el-table-column>
          <el-table-column width="150px" label="划线价">
            <template slot-scope="scope" v-if="scope.row.scribingPrice && scope.row.scribingPrice != '0.00'">
              ￥{{scope.row.scribingPrice}}
            </template>
          </el-table-column>
          <el-table-column width="150px" label="运费" prop="supplierPostFee"></el-table-column>
          <el-table-column width="100px" label="库存" prop="stock"></el-table-column>
          <el-table-column v-if="auditType === '3'" width="150px" label="未通过原因" prop="reject"></el-table-column>
          <el-table-column width="160px" label="提交审核时间" prop="auditTime"></el-table-column>
          <el-table-column width="100px" label="审核状态">
            <template slot-scope="scope">
              <el-tooltip v-if="scope.row.auditType == 3" class="item" effect="dark" :content="scope.row.reject" placement="top-end">
                <span style="color: #2d8cf0">{{ dict.auditType[scope.row.auditType]}}</span>
              </el-tooltip>
              <span v-else size="mini">{{ dict.auditType[scope.row.auditType]}}</span>
            </template>
          </el-table-column>
          <el-table-column width="100px" label="上下架状态">
            <template slot-scope="scope">
              <template>
                {{ dict.upDwonStatusFlag[scope.row.goodsStatus]}}
              </template>
            </template>
          </el-table-column>
          <el-table-column width="120px" label="操作" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="medium" @click="handleEdit(scope.row)" v-if="auditType == '1'">审核</el-button>
              <el-button type="text" size="medium" @click="handleEdit(scope.row)" v-if="auditType == '3'">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchListQuery.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="searchListQuery.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import { listGoodsCategory } from '@/api/goods/goods'
  import { pageSupplierGoods, handleDelete, updateBatchAuditType, updateWithdrawAuditType } from '@/api/goods/supplierGoods'
  import { getDictByGroupName, getDictCommon } from '@/api/common/common'
  import elDragDialog from '@/directive/el-dragDialog'
  import { listSupplier } from '@/api/user/supplier'

  export default {
    directives: {
      elDragDialog
    },
    data() {
      return {
        total: null,
        multipleSelection: [],
        listLoading: true,
        serachType: '1',
        supplierList: [],
        searchListQuery: {
          enterpriseId: this.getEnterpriseId(),
          supplierId: '',
          currentPage: 1,
          size: 10,
          goodsStatus: '',
          title: '',
          searchType: '2'
        },
        searchLabelType: '',
        searchKeyword: '',
        dict: {
          auditType: {}
        },
        isDict: false,
        auditType: '1',
        categoryIds: [''],
        goodsList: [],
        comDict: {},
        categoryData: [],
        batchDistributeVisible: false,
        batchDistribute: {
          distributeType: 1,
          distributeRatio: '',
          distributeFee: '',
          shareMemberRatio: '',
          shareMemberFee: '',
          levelOnePartnerRatio: '',
          levelOnePartnerFee: '',
          levelTwoPartnerRatio: '',
          levelTwoPartnerFee: '',
          recruiterRatio: '',
          recruiterFee: ''
        }
      }
    },
    // 初始化页面
    created() {
      const queryParams = this.getCurrentPage().query
      if (queryParams && queryParams.currentPage) {
        this.searchListQuery.currentPage = queryParams.currentPage
      }
      this.initDict()
      this.listGoodsCategory()
      this.initGoodsList()
      this.initDictCommon()
      this.listSupplier()
    },
    filters: {
      priceFilter(e) {
        return e.toFixed(2)
      }
    },
    mounted() {
    },
    methods: {
      initDictCommon() {
        getDictCommon().then(response => {
          this.comDict = response.data
        })
      },
      listSupplier() {
        listSupplier({ enterpriseId: this.getEnterpriseId() }).then(response => {
          if (response.isError) return
          this.supplierList = response.data
          // 添加筛选条件 为全部
          this.supplierList.unshift({
            supplierName: '全部',
            supplierId: ''
          })
        })
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.initGoodsList()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.initGoodsList()
      },
      // 勾选
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      initDict() {
        getDictByGroupName('ProjectGoodsDTO').then(response => {
          this.dict = Object.assign(this.dict, response.data)
        })
      },
      initGoodsList() {
        this.searchListQuery['oneCategoryId'] = ''
        this.searchListQuery['twoCategoryId'] = ''
        this.searchListQuery['threeCategoryId'] = ''
        if (this.searchLabelType) {
          this.searchListQuery['labelType'] = this.searchLabelType
        }
        if (this.serachType === '1') {
          this.searchListQuery['title'] = this.searchKeyword
          this.searchListQuery['goodsArticleNo'] = ''
        }
        if (this.serachType === '2') {
          this.searchListQuery['title'] = ''
          this.searchListQuery['goodsArticleNo'] = this.searchKeyword
        }
        if (this.serachType === '3') {
          this.searchListQuery['title'] = this.searchKeyword
        }
        this.searchListQuery['oneCategoryId'] = ''
        this.searchListQuery['twoCategoryId'] = ''
        this.searchListQuery['threeCategoryId'] = ''
        this.searchListQuery.searchType = ''
        const categoryIds = this.categoryIds
        if (categoryIds.length === 1) {
          this.searchListQuery['oneCategoryId'] = categoryIds[0]
        }
        if (categoryIds.length === 2) {
          this.searchListQuery['twoCategoryId'] = categoryIds[1]
        }
        if (categoryIds.length === 3) {
          this.searchListQuery['threeCategoryId'] = categoryIds[2]
        }
        if (this.searchListQuery.goodsStatus === '2') {
          this.searchListQuery.goodsStatus = ''
        }
        this.listLoading = true
        // 搜索状态
        this.searchListQuery['auditType'] = this.auditType
        pageSupplierGoods(this.searchListQuery).then(response => {
          this.listLoading = false
          this.total = response.data.total
          this.goodsList = response.data.records
          if (!this.isDict) {
            this.dict = Object.assign(this.dict, response.data.dict)
            this.isDict = true
          }
        })
      },
      // 获取类目
      listGoodsCategory() {
        const enterpriseId = this.getEnterpriseId()
        listGoodsCategory(enterpriseId).then(response => {
          this.categoryData = response.data
          this.categoryData.unshift({
            categoryId: '',
            label: '全部',
            value: ''
          })
        })
      },
      handleSearch() {
        this.initGoodsList()
      },
      resetSearch() {
        this.serachType = '1'
        this.searchKeyword = ''
        this.categoryIds = []
        this.searchListQuery = {
          enterpriseId: this.getEnterpriseId(),
          supplierId: '',
          currentPage: 1,
          size: 10,
          goodsStatus: '',
          title: '',
          searchType: ''
        }
        this.initGoodsList()
      },
      // 商品状态
      goodsStatusClick() {
        this.searchListQuery.currentPage = 1
        this.handleSearch()
      },
      // 编辑
      handleEdit(row, status) {
        this.$router.push({ path: '/goods/supplier-goods-audit/edit/index', query: { supplierGoodsId: row.supplierGoodsId, currentPage: this.searchListQuery.currentPage.toString(), auditType: this.auditType, goodsId: row.goodsId, status: status }})
      },
      // 撤回审核
      updateWithdrawAuditType(row) {
        this.$confirm('商品正在等待企业审核，确定要撤回审核？', '提示', {
          confirmButtonText: '撤回审核',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          updateWithdrawAuditType(row.supplierGoodsId).then(response => {
            if (response.isError) return
            this.initGoodsList()
          })
        }).catch(() => {
        })
      },
      // 修改库存
      updateStock(row) {
      },
      // 删除
      handleDelete(row) {
        this.$confirm('此操作将删除该商品，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          handleDelete(row.supplierGoodsId).then(response => {
            if (response.isError) return
            this.initGoodsList()
          })
        }).catch(() => {
        })
      },
      // 提交审核
      updateBatchAuditType(row) {
        const array = []
        if (row) {
          array.push(row.supplierGoodsId)
        } else {
          const selections = this.multipleSelection
          if (selections.length === 0) {
            this.$message({ type: 'error', message: '请勾选商品!' })
            return
          }
          selections.forEach(e => {
            array.push(e.supplierGoodsId)
          })
        }
        const params = {
          supplierGoodsIds: array.join(','),
          supplierId: this.searchListQuery.supplierId
        }
        updateBatchAuditType(params).then(response => {
          if (response.isError) return
          this.$message({
            message: '成功提交',
            type: 'success'
          })
          this.initGoodsList()
        })
      },
      showReason(row) {
      }
    }
  }
</script>
<style lang="less" scoped>
  .btn-search {
    height: 60px;
    display: flex;
    align-items: center;
  }

  .user-avatar {
    width: 65px;
    height: 65px;
    display: block;
    padding: 1px;
    border: #efefef 1px solid;
  }

  .category-style {
    color: #636669;
  }

  .gray-bar {
    background: #e4e4e4;
    padding: 20px;
    margin-bottom: 20px;
    width: 80%;
  }
  .tips {
    color: gray;
    font-size: 12px;
    line-height: 1.2;
    padding-top: 5px;
  }
  .v-align-h{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
  }
  .goods-title {
    color: #155bd4;
    line-height: 1.2;
  }
  // 2行文字展示
  .line-2{
    line-height: 1.4;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    word-break:break-word;
  }
</style>
